import React, { Component } from "react";

import { SearchBar } from "antd-mobile";

import styles from "./index.module.css";

import { API, getCity } from "../../../utils";
export default class Search extends Component {
  // 当前城市id
  cityId = getCity().value;
  // 定时器 id
  timer = null;
  state = {
    searchTxt: "",
    tipsList: [],
  };
  /* 
    传递小区数据：

    1 给搜索列表项添加单击事件。
    2 在事件处理程序中，调用 history.replace() 方法跳转到发布房源页面。
    3 将被点击的小区信息作为数据一起传递过去。

    4 在发布房源页面，判断 history.loaction.state 是否为空(replace第二个参数为state)。
    5 如果为空，不做任何处理。
    6 如果不为空，则将小区信息存储到发布房源页面的状态中。
  */
  onTipsClick = (item) => {
    this.props.history.replace("/rent/add", {
      name: item.communityName,
      id: item.community,
    });
  };
  // 渲染搜索结果列表
  renderTips = () => {
    const { tipsList } = this.state;

    return tipsList.map((item) => (
      <li
        key={item.community}
        className={styles.tip}
        onClick={() => this.onTipsClick(item)}
      >
        {item.communityName}
      </li>
    ));
  };

  handleSearchTxt = (value) => {
    this.setState({
      searchTxt: value,
    });
    if (!value) {
      //   输入框为空
      return this.setState({
        tipsList: [],
      });
    }
    clearTimeout(this.timer);

    this.timer = setTimeout(async () => {
      //   获取小区数据
      const res = await API.get(`/area/community`, {
        params: {
          name: value,
          id: this.cityId,
        },
      });
      this.setState({
        tipsList: res.data.body,
      });
      console.log(res);
    }, 500);
  };
  render() {
    const { history } = this.props;
    const { searchTxt } = this.state;

    return (
      <div className={styles.root}>
        {/* 搜索框 */}
        <SearchBar
          placeholder="请输入小区或地址"
          value={searchTxt}
          showCancelButton={true}
          onChange={this.handleSearchTxt}
          onCancel={() => history.replace("/rent/add")}
        />

        {/* 搜索提示列表 */}
        <ul className={styles.tips}>{this.renderTips()}</ul>
      </div>
    );
  }
}
